<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>左栏</title>
        <style>
            *{
                /* 盒模型、字体、去掉超链接的下划线 、去掉列表项标志*/
                font-size:16px;
                padding:0;
                margin:0;
                color:#333;
                font-family: 微软雅黑;
                text-decoration:none;
                list-style: none;
            }
            /* 1.左栏外层：宽高、背景颜色、 */
            article{
                width:235px;
                height:470px;
                background-color: #949494;
                
                
            }
            /* 2.左栏内层：等高、定宽、垂直水平居中、设置颜色 ul li  、相对定位【钩点位】*/
            article ul.sidebar li{
                height:47px;
                width:235px;
                bord er:1px solid red;
                line-height:47px;
                text-align:center;
                position:relative;
            }
            article ul.sidebar li:hover{
                background-color: #ffff7f;
            }
            /* 3.弹出框   找到ul，li第一行，加div.outer */
            article ul.sidebar div.outer{
                width:500px;
                height:470px;
                border:1px solid red;
                position: absolute;
                left:235px;
                z-index:999;
                /* 学习JQuery框架显示与隐藏属性：动态 */
                display:block;
            }
            article ul.sidebar li span{
                float:right;
            }
        </style>
    </head>
    <body>
        <!-- 左栏外围：结构化标记/语义化元素等同于div+别名形式，优点：有利于SED优化
         article元素：独立的内容区域空间，使用场景：新闻区域、博客区域、左栏等
         -->
         <article>
             <ul class="sidebar">
                <!-- 挂靠钩点位 -->
                <div class="outer"></div>
                 <li>手机 平板 电话卡 <span>></span></li>
                 <li>电视 盒子 <span>></span></li>
                 <li>路由器 智能硬件 <span>></span></li>
                 <li>移动电源 插线板 <span>></span></li>
                 <li>耳机 音箱 <span>></span></li>
                 <li>电池 存储卡 <span>></span></li>
                 <li>保护套 <span>></span></li>
                 <li>贴膜 <span>></span></li>
                 <li>其他 <span>></span></li>
                 <li>墨镜 其他周边 <span>></span></li>
                
        </ul>
         </article>    
         </body>
</html>